<script setup lang="ts" name="CkWrapper">
import { useDrop } from 'vue3-dnd'
import { storeToRefs } from 'pinia'
import { toRefs } from '@vueuse/core'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import { cloneDeep } from 'lodash-es'

const layoutStore = useLayoutStore()

const { isLayoutDragging, isNear, isNearSelf, layout, dropTo, dropLevel, dropIndex, dropId } = storeToRefs(layoutStore)

const position = ref('')
const cardRef = ref(null)

const [dropCollect, drop] = useDrop({
  accept: ['toolbar'],
  hover: (item: any, monitor) => {
    if (!cardRef.value) return
    const hoverBoundingRect = cardRef.value?.getBoundingClientRect()
    const clientOffset = monitor.getClientOffset()
    if (clientOffset.y - hoverBoundingRect.top <= 2 && clientOffset.y - hoverBoundingRect.top >= -2 && layout.value.wrapper.length === 0) {
      position.value = 'top'
      isNear.value = true
      isNearSelf.value = false
      dropTo.value = 'wrapper'
      dropIndex.value = 0
      dropId.value = ''
      dropLevel.value = 'toolbar'
    } else if ((clientOffset.y - hoverBoundingRect.top < 10 && clientOffset.y - hoverBoundingRect.top >= 0 || clientOffset.y - hoverBoundingRect.top < 40 && clientOffset.y - hoverBoundingRect.top >= 0 && clientOffset.x - hoverBoundingRect.left < 12 && clientOffset.x - hoverBoundingRect.left >= 0) && layout.value.wrapper.length > 0) {
      position.value = ''
      isNear.value = true
      isNearSelf.value = true
      dropTo.value = 'wrapper'
      dropIndex.value = 0
      dropId.value = ''
      dropLevel.value = 'toolbar'
    } else {
      position.value = ''
      isNear.value = false
      isNearSelf.value = false
      dropTo.value = 'root'
      dropIndex.value = -1
      dropId.value = ''
      dropLevel.value = 'toolbar'
    }
  },
  collect(monitor) {
    return {
      isOverCurrent: monitor.isOver({ shallow: true })
    }
  },
  drop(item) {
    if (dropTo.value === 'wrapper') {
      const res = cloneDeep(item)
      res.options.attr.x = 0
      res.options.attr.y = 0
      layoutStore.moveLayout(res)
    }
    position.value = ''
  }
})

const { isOverCurrent } = toRefs(dropCollect)

const setRef = (el) => {
  cardRef.value = drop(el)
}
</script>

<template>
  <div :ref="setRef" class="dnd-container wrapper">
    <template v-for="item,index in layout.wrapper" :key="index">
      <template v-if="item.component && item.visible">
        <component :is="item.component" :info="item" :index="index"></component>
      </template>
    </template>
    <slot />
    <div v-if="isLayoutDragging && isOverCurrent" :class="['indicator primary-color-opacity-3', position]"></div>
  </div>
</template>

<style scoped lang="scss">
.dnd-container{
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 2px;
}

.indicator {
  position: absolute;
  z-index: 10;

  &.top {
    top: 0;
    right: 0;
    left: 0;
    height: 20px;
    border-top: 4px solid var(--el-color-primary);
    animation: height 300ms linear;
  }

  &.right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    border-right: 4px solid var(--el-color-primary);
    animation: width 300ms linear;
  }

  &.bottom {
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    border-bottom: 4px solid var(--el-color-primary);
    animation: height 300ms linear;
  }

  &.left {
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    border-left: 4px solid var(--el-color-primary);
    animation: width 300ms linear;
  }
}

@keyframes height {
  from {
    height: 0
  }

  to {
    height: 20px
  }
}

@keyframes width {
  from {
    width: 0
  }

  to {
    width: 20px
  }
}
</style>

<style>
.primary-color-opacity-3{
  background: rgba(var(--el-color-primary-rgb), 0.3);
}
</style>
